<template>
    <el-container class="addwork">
      <el-header class="header">
        <div class="header-img1">
            <img src="@/assets/img/左箭头.png"/>
            &nbsp;
            <span class="header-text">新增作业</span>           
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside">
            <div class="name">
 
                    <div class="name_01">小节名称：</div>
                   <div class="name_02"> <el-input v-model="getSectionName" style="width: 230px;" disabled placeholder="小节名称" /></div>

                    <div class="name_01">创建人：</div>
                    <div class="name_02"><el-input  v-model="getName" style="width: 230px" disabled placeholder="创建人" />
                </div>
            </div>
            <div class="num">
                <div class="num_01">题目序号：</div>
                <div class="num_02">
                    <div v-for="(item, index) in tasks" :key="item.taskId" @click="getTaskById(item.taskId), qu(index + 1)" class="num_02_01" tabindex="1">
                        <!-- user-select:none设置文本样式为禁止选中的状态 -->
                       <span style="user-select:none;">{{ index + 1 }}</span>
                    </div>
                </div>
                <div class="XgWork">
                    <el-button color="red">修改作业</el-button>
                </div>                
            </div>
        </el-aside>
        <el-main class="main">
            <el-form label-width="120px" >
                <el-form-item>
                    <span style="font-size: 16px;">题目名称：</span><el-input style="width: 80%; height: 30px; font-size: 16px;" placeholder="请输入作业题目"/>
                </el-form-item>
                <!-- 文件上传 -->
                <el-upload
                    v-model:file-list="fileList"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                    multiple
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :limit="3"
                    :on-exceed="handleExceed"
                    style="margin-left: 87.5%; margin-bottom: -1.5%;"
                >
                <el-icon size="25px"><FolderAdd /></el-icon>
                </el-upload>

                <el-form-item>
                    <span style="font-size: 16px;" >题目答案：</span>
                    <el-input type="textarea" style="width: 80%; font-size: 16px;" rows="14" placeholder="请输入题目答案"/>
                </el-form-item>

                <div class="XuanZe">
                    <el-button color="red">上一题</el-button>
                    <el-button color="red">下一题</el-button>
                </div> 

                <el-button color="red" class="ScWork">上传作业</el-button>

                               
            </el-form>
        </el-main>
      </el-container>
    </el-container>
</template>
<script setup>
import { selectAllTask, selectTaskById, saveOrUpdate, selectUserInfo, selectSectionName } from '@/api/common/work/work.js'
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from 'element-plus'
import axios from 'axios';
import route from "@/router";
import { useRoute } from "vue-router";
import { useTokenStore } from "@/store/token.js";
import { FolderAdd } from '@element-plus/icons-vue'


const router = useRoute();

//作业模型
const sectionId = ref();
const courseId = ref();

//获取小节名称
const getSectionName = ref(null)
const sectionName = async () => {
  let res = await selectSectionName(router.query.sectionId)
  getSectionName.value = res.data.sectionName
}
sectionName();

//获取创建人名称
const getName = ref('')
const getUserName = async () => {
  let res = await selectUserInfo()
  getName.value = res.data.nickName
}
getUserName();


const tasks = ref([])
//获取全部作业
const getAllTask = async () => {
    console.log(sectionId.value);
  tasks.value = await (await selectAllTask(sectionId.value)).data
  if (tasks.value != null && tasks.value != '') {
    console.log(tasks.value)
  }
}

const task = ref({
  sectionId: router.query.sectionId,
  taskId: 0,
  teacherId: 0,
  taskName: "",
  taskInfo: ""
});

//根据作业Id查询作业详情
const getTaskById = (taskId) => {
    console.log(taskId);
  selectTaskById(taskId).then(res => {
    task.value = res.data

  })

}

const suoyin = ref(0)
const xsid = ref(0)

//获取索引
const qu = (index) => {
  suoyin.value = index
}


onMounted(() => {
  let sectId = router.query.sectionId
  sectionId.value = sectId
  courseId.value = router.query.courseId
  getAllTask()
})

</script>


<style lang='scss' scoped>

header{
    width: 85.1%;
    height: 4.5%;
    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 9.8%;
    bottom: 86.5%;
}

aside{
    width: 20%;
    height: 83.5%;
    box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 1.8%;
    left: 9.8%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-img1 {
    width: 300px;
    height: 60px;
    float: left;
    margin-top: 4px;
    margin-left: -10px;
    border-radius: 1rem;
    
    img {
      width: 27px;
      margin-left: 9px;
      margin-top: 15px;
    }

    .header-text{
        position: absolute;
        font-size: 120%;
        font-weight: bold;
        font-family: "微软雅黑";
        bottom: 20%;
    }

}

.name {
    width: 85%;
    height: 25%;
    font-weight: bold;
    font-family: "微软雅黑";
    font-size: 14px;
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 8%;
    top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .name_01{
        margin-left: 6px;
    }
    .name_02{
        margin-left: 11px;
    }
}

.num {
    width: 85%;
    height: 65%;
    box-shadow: 0px 0px 15px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 8%;
    top: 32%;
    .num_01{
        margin-top: 6px;
        margin-left: 5px;
        font-weight: bold;
        font-family: "微软雅黑";
    }
    .num_02{
        width: 96%;
        height: 80%;
        margin-left: 4px;
        margin-top: 6px;
       display: flex;
       flex-wrap: wrap;
       align-content: flex-start;
       
        .num_02_01{
            width: 25px;
            height: 25px;
            margin-left: 9px;
            margin-top: 10px;
            background-color: #ff0000;
            color: #f9f7f7;
            text-align: center;
        }
        .num_02_01:focus{
            background-color: #f9f7f7;
            color: #000;
            border: 1px solid #ff0000;
        }
    }

    .XgWork{
        position: absolute;
        left: 63%;
        top: 90%;
    }
}

main{
    width: 65%;
    height: 83.5%;
    box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 1.8%;
    left: 29.8%;  
    
    .ScWork{
        position: absolute;
        left: 86%;
        top: 90%;
        width: 7.5%;
        height: 4.5%;
        font-family: "微软雅黑";
        font-size: 100%;
    }

    .XuanZe{
        position: absolute;
        left: 73.5%;
        top: 83%;
    }
}

</style>